<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>

<div id="app">

    <h2 align="center">用户登录日志</h2>

    <!--    <a style="text-align: center" href="/index">首页</a>-->
    <el-table
            :data="userLoginLog"
            v-loading="loading"
            border
            style="width: 100%">
        <el-table-column
                fixed
                type="index"
                :index="indexMethod"
                label="编号"
                align="center"
                width="100px"
        >
        </el-table-column>
        <el-table-column
                prop="loginName"
                label="账号"
                show-overflow-tooltip="true"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="getDate"
                label="操作时间"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="content"
                label="内容"
                align="center"
        >
        </el-table-column>

        <el-table-column
                prop="cityLocation"
                label="位置"
                align="center"
        >
        </el-table-column>

        <el-table-column
                prop="ipAddress"
                label="IP地址"
                align="center"
        >
        </el-table-column>

        <el-table-column
                prop="postalCode"
                label="邮政编码"
                align="center"
        >
        </el-table-column>

        </el-table-column>
        <el-table-column
                fixed="right"
                align="center"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div class="pagination-container" style="text-align: center;padding-top: 30px">
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>
</div>

<script th:src="@{/axios.min.js}"></script>
<script th:src="@{/vue.js}"></script>

<!-- 引入样式 -->
<link rel="stylesheet" th:href="@{/element-ui.css}">
<!-- 引入组件库 -->
<script th:src="@{/element-ui.js}"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            userLoginLog: [],
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 8,
                total: 100,
                queryString: null,
            },
            loading: true

        },
        methods: {
            //自定义索引
            indexMethod(index) {
                return index + 1;
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

            findPage() {
                //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }
                axios.post("/log/findPage", param).then(resp => {
                    if (resp.data.flag) {
                        this.userLoginLog = resp.data.data
                        this.pagination.total = resp.data.total;
                        this.loading = false
                    } else {
                        this.loading = false
                        this.$message.error(resp.data.message);
                    }
                })
            },
            deleteById(id) {
                this.loading=true
                axios.delete("/log/deleteById/" + id).then(resp => {
                    if (resp.data.flag) {
                        this.findPage()
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                    } else {
                        this.loading = false
                        this.$message.error(resp.data.message);
                    }
                })
            }

        },
        created() {
            this.findPage()
        }
    })
</script>
</body>
</html>